<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getRolePresetList, getRolePresetById } from '@/api/rolePreset.js'
import { getTodayRanking } from '@/api/rankingList.js'
import { ElMessage } from 'element-plus'
import { useRoleStore } from '@/stores/role.js'
import { Search, Trophy, TrendCharts } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const roleStore = useRoleStore()
const roleList = ref([])
const loading = ref(false)
const hotThreshold = ref(10) // 火爆标签阈值，可以根据需要调整

// 排行榜相关
const rankingList = ref([])
const rankingLoading = ref(false)
const rankingHotThreshold = ref(20) // 排行榜火爆标签阈值

// 搜索相关
const searchQuery = ref('')

// 分页相关
const currentPage = ref(1)
const pageSize = ref(12) // 每页显示数量
const total = ref(0)

// 角色详情弹窗相关
const dialogVisible = ref(false)
const currentRole = ref(null)

// 分享相关
const isSharedMode = ref(false)
const sharedRoleId = ref(null)

// 获取排行榜数据
const fetchRankingList = async () => {
  rankingLoading.value = true
  try {
    const res = await getTodayRanking(10)
    if (res.code === 200) {
      rankingList.value = res.data || []
    } else {
      ElMessage.error(res.msg || '获取排行榜失败')
      rankingList.value = []
    }
  } catch (error) {
    console.error('获取排行榜出错:', error)
    ElMessage.error('获取排行榜失败，请稍后重试')
    rankingList.value = []
  } finally {
    rankingLoading.value = false
  }
}

// 获取分享的角色
const fetchSharedRole = async (roleId) => {
  loading.value = true
  try {
    const res = await getRolePresetById(roleId)
    if (res.code === 200 && res.data) {
      // 检查角色是否为公开状态
      if (res.data.isPrivate === 1) {
        roleList.value = [res.data]
        total.value = 1
        currentPage.value = 1
        ElMessage.success('已显示分享的角色')
      } else {
        ElMessage.warning('该角色已设为私有，无法查看')
        roleList.value = []
        total.value = 0
      }
    } else {
      ElMessage.error('角色不存在或已被删除')
      roleList.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('获取分享角色失败:', error)
    ElMessage.error('获取分享角色失败，请稍后重试')
    roleList.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 获取角色列表 - 修改为支持分页和搜索参数
const fetchRoleList = async (page = 1, roleName = '') => {
  loading.value = true
  try {
    const params = {
      startPage: page,
      pageSize: pageSize.value,
      isPrivate: 1 // 默认查询公开角色
    }

    // 添加搜索条件
    if (roleName) {
      params.roleName = roleName
    }

    console.log('请求参数:', params) // 调试日志

    const res = await getRolePresetList(params)
    console.log('后端返回数据:', res) // 调试日志

    if (res.code === 200) {
      // 根据后端实际返回的数据结构调整
      if (res.data && typeof res.data === 'object' && res.data.records) {
        // MyBatis-Plus分页结构
        roleList.value = res.data.records || []
        total.value = res.data.total || 0
        currentPage.value = res.data.current || page
      } else if (Array.isArray(res.data)) {
        // 如果返回的是数组，说明没有分页
        roleList.value = res.data
        total.value = res.data.length
        currentPage.value = page
      } else {
        // 其他情况
        roleList.value = []
        total.value = 0
        currentPage.value = 1
      }
    } else {
      ElMessage.error(res.msg || '获取角色列表失败')
      roleList.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('获取角色列表出错:', error)
    ElMessage.error('获取角色列表失败，请稍后重试')
    roleList.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 搜索角色
const searchRoles = () => {
  if (isSharedMode.value) {
    ElMessage.info('分享模式下无法搜索，请点击"查看所有角色"退出分享模式')
    return
  }
  currentPage.value = 1 // 搜索时重置到第一页
  fetchRoleList(1, searchQuery.value.trim())
}

// 清空搜索
const clearSearch = () => {
  searchQuery.value = ''
  if (isSharedMode.value) {
    exitSharedMode()
  } else {
    currentPage.value = 1
    fetchRoleList(1)
  }
}

// 退出分享模式
const exitSharedMode = () => {
  isSharedMode.value = false
  sharedRoleId.value = null
  searchQuery.value = ''
  currentPage.value = 1
  // 更新URL，跳转回主页而不是角色广场
  router.replace({ name: 'home' })
  fetchRoleList(1)
}

// 处理回车键搜索
const handleEnterSearch = () => {
  searchRoles()
}

// 分页改变事件
const handlePageChange = (page) => {
  if (isSharedMode.value) {
    return // 分享模式下不允许分页
  }
  console.log('页码改变:', page) // 调试日志
  currentPage.value = page
  fetchRoleList(page, searchQuery.value.trim())
}

// 每页大小改变事件
const handleSizeChange = (size) => {
  if (isSharedMode.value) {
    return // 分享模式下不允许改变页面大小
  }
  console.log('每页大小改变:', size) // 调试日志
  pageSize.value = size
  currentPage.value = 1
  fetchRoleList(1, searchQuery.value.trim())
}

// 不再对角色列表进行排序，直接使用后端返回的顺序
const displayRoleList = computed(() => {
  return roleList.value
})

// 查看角色详情
const viewRoleDetail = (role) => {
  currentRole.value = role
  dialogVisible.value = true
}

// 使用角色 - 修改为使用状态管理
// 在script setup中添加事件定义
const emit = defineEmits(['role-selected'])

// 修改使用角色函数
const useRole = (role) => {
  if (!role || !role.id) {
    ElMessage.warning('角色信息不完整，无法使用')
    return
  }

  // 发送角色选择事件给父组件
  emit('role-selected', role)

  // 如果在分享模式下，退出分享模式
  if (isSharedMode.value) {
    // 不直接调用exitSharedMode，而是让父组件处理
    isSharedMode.value = false
    sharedRoleId.value = null
    searchQuery.value = ''
    currentPage.value = 1
    router.replace({ name: 'home' })
  }
}

// 从排行榜使用角色
const useRankingRole = (rankingRole) => {
  if (!rankingRole || !rankingRole.roleId) {
    ElMessage.warning('角色信息不完整，无法使用')
    return
  }

  // 构造角色对象
  const role = {
    id: rankingRole.roleId,
    roleName: rankingRole.roleName,
    roleDescription: rankingRole.roleDescription,
    avatarUrl: rankingRole.avatarUrl
  }

  // 发送角色选择事件给父组件
  emit('role-selected', role)
}

// 解析标签字符串为数组
const parseTags = (tagsStr) => {
  try {
    return JSON.parse(tagsStr || '[]')
  } catch (error) {
    return []
  }
}

// 判断排行榜角色是否火爆
const isRankingHotRole = (role) => {
  return role.todayUsageCount >= rankingHotThreshold.value
}

// 获取排名图标
const getRankIcon = (rank) => {
  switch (rank) {
    case 1:
      return '🥇'
    case 2:
      return '🥈'
    case 3:
      return '🥉'
    default:
      return rank
  }
}

// 监听路由参数变化
watch(() => route.query.shared, (newSharedId) => {
  if (newSharedId) {
    isSharedMode.value = true
    sharedRoleId.value = newSharedId
    fetchSharedRole(newSharedId)
  } else {
    isSharedMode.value = false
    sharedRoleId.value = null
  }
}, { immediate: true })

onMounted(() => {
  // 检查是否有分享参数
  if (route.query.shared) {
    isSharedMode.value = true
    sharedRoleId.value = route.query.shared
    fetchSharedRole(route.query.shared)
  } else {
    fetchRoleList()
  }
  fetchRankingList()
})
</script>

<template>
  <div class="role-square">
    <!-- 标题和搜索栏 -->
    <div class="role-square-header">
      <h1>{{ isSharedMode ? '分享角色' : '角色广场' }}</h1>
      <p>{{ isSharedMode ? '查看分享的角色' : '探索各种预设角色，开始你的AI角色扮演之旅' }}</p>

      <!-- 分享模式提示 -->
      <div v-if="isSharedMode" class="shared-mode-notice">
        <el-alert title="您正在查看分享的角色" type="info" :closable="false" show-icon>
          <template #default>
            <div class="shared-notice-content">
              <span>当前显示的是他人分享的角色</span>
              <el-button type="primary" size="small" @click="exitSharedMode">
                查看所有角色
              </el-button>
            </div>
          </template>
        </el-alert>
      </div>

      <!-- 搜索框 -->
      <div class="search-container" v-if="!isSharedMode">
        <div class="search-wrapper">
          <el-input v-model="searchQuery" placeholder="搜索角色名称..." class="search-input" clearable @clear="clearSearch"
            @keyup.enter="handleEnterSearch">
            <template #prefix>
              <el-icon>
                <Search />
              </el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="searchRoles" :loading="loading" icon="Search" class="search-button">
            搜索
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 - 左右布局 -->
    <div class="main-content">
      <!-- 左侧排行榜区域 - 分享模式下隐藏 -->
      <div class="left-sidebar" v-if="!isSharedMode">
        <div class="ranking-section">
          <div class="section-header">
            <el-icon class="section-icon">
              <Trophy />
            </el-icon>
            <h2>今日热门排行榜</h2>
            <el-icon class="trend-icon">
              <TrendCharts />
            </el-icon>
          </div>

          <div class="ranking-content" v-loading="rankingLoading">
            <div v-if="rankingList.length === 0 && !rankingLoading" class="no-ranking">
              <el-empty description="暂无排行榜数据" :image-size="40" />
            </div>

            <div v-else class="ranking-list">
              <div v-for="(item, index) in rankingList" :key="item.roleId" class="ranking-item"
                :class="{ 'top-three': index < 3 }">
                <div class="rank-number">
                  <span class="rank-icon">{{ getRankIcon(item.rank || index + 1) }}</span>
                </div>

                <div class="ranking-avatar">
                  <el-avatar :size="36" :src="item.avatarUrl" />
                  <div v-if="isRankingHotRole(item)" class="ranking-hot-badge">
                    <el-tag type="danger" size="small" effect="dark">🔥</el-tag>
                  </div>
                </div>

                <div class="ranking-info">
                  <div class="ranking-name">
                    <el-tooltip class="box-item" effect="dark" :content="item.roleName" placement="top">
                      <span class="role-name-text" :title="item.roleName">{{ item.roleName }}</span>
                    </el-tooltip>

                    <span v-if="isRankingHotRole(item)" class="hot-indicator">🔥</span>
                  </div>
                  <div class="ranking-stats">
                    <span class="today-count">今日 {{ item.todayUsageCount }}次</span>
                    <span class="total-count">总计 {{ item.totalUsageCount }}次</span>
                  </div>
                </div>

                <div class="ranking-actions">
                  <el-button type="primary" size="small" @click="useRankingRole(item)">
                    使用
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧角色列表区域 -->
      <div class="right-content" :class="{ 'full-width': isSharedMode }">
        <div class="roles-section">
          <div class="section-header">
            <h2>{{ isSharedMode ? '分享的角色' : (searchQuery ? '搜索结果' : '所有角色') }}</h2>
          </div>

          <div class="role-content">
            <el-row :gutter="6" class="role-list" v-loading="loading">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="role in displayRoleList" :key="role.id" class="role-col">
                <el-card class="role-card" shadow="hover">
                  <div class="role-avatar">
                    <el-avatar :size="55" :src="role.avatarUrl" />
                  </div>
                  <div class="role-info">
                    <!-- 添加角色标题 -->
                    <el-tooltip class="box-item" effect="dark" :content="role.roleName" placement="top">
                      <h3 class="role-title">{{ role.roleName }}</h3>
                    </el-tooltip>

                    <div class="usage-count-display">
                      <el-progress :percentage="Math.min(100, role.usageCount * 5)"
                        :color="role.usageCount >= hotThreshold.value ? '#f56c6c' : '#409eff'" :stroke-width="3"
                        :show-text="false"></el-progress>
                      <span class="usage-number">{{ role.usageCount }}次</span>
                    </div>
                    <p class="role-description">{{ role.roleDescription }}</p>
                    <div class="role-tags">
                      <el-tag v-for="(tag, index) in parseTags(role.tags)" :key="index" size="small" class="role-tag">
                        {{ tag }}
                      </el-tag>
                    </div>
                    <div class="role-actions">
                      <el-button type="primary" size="small" @click="useRole(role)">使用</el-button>
                      <el-button type="info" size="small" plain @click="viewRoleDetail(role)">详情</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>

            <div v-if="roleList.length === 0 && !loading" class="no-data">
              <el-empty :description="isSharedMode ? '分享的角色不存在或已被设为私有' : (searchQuery ? '未找到匹配的角色' : '暂无角色数据')" />
            </div>
          </div>

          <!-- 分页组件 - 分享模式下隐藏 -->
          <div class="pagination-container" v-if="total > 0 && !isSharedMode">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[8, 12, 16, 20]"
              :total="total" layout="prev, pager, next, sizes" :pager-count="5" @size-change="handleSizeChange"
              @current-change="handlePageChange" class="custom-pagination" background small />
          </div>
        </div>
      </div>
    </div>

    <!-- 角色详情弹窗 -->
    <el-dialog v-model="dialogVisible" :title="currentRole?.roleName || '角色详情'" width="500px"
      :close-on-click-modal="true" :show-close="true" class="role-detail-dialog">
      <div v-if="currentRole" class="role-detail-content">
        <div class="role-detail-header">
          <el-avatar :size="100" :src="currentRole.avatarUrl" class="detail-avatar" />
          <div class="detail-header-info">
            <div class="detail-usage">
              <el-tag type="info" effect="plain">已使用 {{ currentRole.usageCount }} 次</el-tag>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <h3 class="section-title">角色描述</h3>
          <p class="detail-description">{{ currentRole.roleDescription }}</p>
        </div>

        <div class="detail-section" v-if="parseTags(currentRole.tags).length > 0">
          <h3 class="section-title">角色标签</h3>
          <div class="detail-tags">
            <el-tag v-for="(tag, index) in parseTags(currentRole.tags)" :key="index" class="detail-tag">
              {{ tag }}
            </el-tag>
          </div>
        </div>

        <div class="detail-section" v-if="currentRole.rolePrompt">
          <h3 class="section-title">角色提示词</h3>
          <div class="detail-prompt">
            <pre>{{ currentRole.rolePrompt }}</pre>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="useRole(currentRole)">使用此角色</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.role-square {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
  overflow: hidden;
}

.role-square-header {
  text-align: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.role-square-header h1 {
  font-size: 28px;
  color: var(--el-text-color-primary);
  margin-bottom: 10px;
  font-weight: 600;
}

.role-square-header p {
  font-size: 16px;
  color: var(--el-text-color-regular);
}

.search-container {
  max-width: 500px;
  margin: 20px auto 0;
}

.search-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-input {
  flex: 1;
}

.search-button {
  flex-shrink: 0;
  height: 32px;
  padding: 0 16px;
}

/* 主要内容区域 - 左右布局 */
.main-content {
  flex: 1;
  display: flex;
  gap: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

/* 左侧排行榜区域 */
.left-sidebar {
  width: 300px;
  flex-shrink: 0;
  min-width: 280px;
  max-width: 300px;
}


.ranking-section {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 8px;
}

.section-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0;
}

.section-icon {
  color: var(--el-color-warning);
  font-size: 18px;
}

.trend-icon {
  color: var(--el-color-success);
  font-size: 16px;
}

.ranking-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.no-ranking {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--el-fill-color-lighter);
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.ranking-item:hover {
  background: var(--el-fill-color-light);
  border-color: var(--el-color-primary-light-7);
  transform: translateY(-1px);
}

.ranking-item.top-three {
  background: linear-gradient(135deg, var(--el-color-primary-light-9), var(--el-color-warning-light-9));
  border-color: var(--el-color-primary-light-7);
}

.rank-number {
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rank-icon {
  font-size: 16px;
  font-weight: bold;
  color: var(--el-color-primary);
}

.ranking-avatar {
  position: relative;
  margin: 0 10px;
}

.ranking-hot-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 1;
}

.ranking-info {
  flex: 1;
  min-width: 0;
}

.ranking-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.role-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.hot-indicator {
  font-size: 12px;
  flex-shrink: 0;
}

.ranking-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
}

.today-count {
  color: var(--el-color-danger);
  font-weight: 600;
}

.total-count {
  color: var(--el-text-color-regular);
}

.ranking-actions {
  flex-shrink: 0;
}

/* 右侧角色列表区域 */
.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  width: calc(100% - 316px);
}

.right-content.full-width {
  width: 100% !important;
  flex: 1;
}

.roles-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

.role-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 8px;
  padding-right: 8px;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}


.role-list {
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.role-col {
  margin-bottom: 10px;
  padding: 0 4px;
  box-sizing: border-box;
}

.role-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
  border: 1px solid var(--el-border-color-light);
  background: var(--el-bg-color);
  min-height: 360px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.role-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-color: var(--el-color-primary);
}

.role-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
  padding-top: 8px;
}

.role-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 10px 10px;
}

.role-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0 0 8px 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.usage-count-display {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.usage-number {
  font-size: 11px;
  color: var(--el-text-color-regular);
  white-space: nowrap;
}

.role-description {
  font-size: 12px;
  color: var(--el-text-color-regular);
  line-height: 1.4;
  margin-bottom: 8px;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 10px;
  min-height: 20px;
}

.role-tag {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
}

.role-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: auto;
}

.role-actions .el-button {
  flex: 1;
  max-width: 75px;
  font-size: 12px;
  padding: 4px 8px;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 16px;
  flex-shrink: 0;
  background: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color-light);
}

.custom-pagination {
  --el-pagination-bg-color: var(--el-bg-color);
  --el-pagination-text-color: var(--el-text-color-primary);
  --el-pagination-border-radius: 6px;
}

/* 滚动条样式 */
.role-content::-webkit-scrollbar,
.ranking-content::-webkit-scrollbar {
  width: 6px;
}

.role-content::-webkit-scrollbar-track,
.ranking-content::-webkit-scrollbar-track {
  background: var(--el-fill-color-lighter);
  border-radius: 3px;
}

.role-content::-webkit-scrollbar-thumb,
.ranking-content::-webkit-scrollbar-thumb {
  background: var(--el-border-color-darker);
  border-radius: 3px;
}

.role-content::-webkit-scrollbar-thumb:hover,
.ranking-content::-webkit-scrollbar-thumb:hover {
  background: var(--el-border-color-dark);
}

/* 角色详情弹窗样式 */
.role-detail-dialog {
  border-radius: 12px;
}

.role-detail-content {
  padding: 20px;
}

.role-detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.detail-avatar {
  flex-shrink: 0;
}

.detail-header-info {
  flex: 1;
}

.detail-usage {
  margin-bottom: 8px;
}

.detail-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--el-text-color-regular);
  margin: 0;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-tag {
  font-size: 12px;
}

.detail-prompt {
  background: var(--el-fill-color-lighter);
  border-radius: 6px;
  padding: 16px;
  border: 1px solid var(--el-border-color-light);
}

.detail-prompt pre {
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--el-text-color-regular);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
    gap: 20px;
  }

  .left-sidebar {
    width: 100%;
    max-width: none;
    min-width: auto;
  }

  .right-content {
    width: 100% !important;
  }

  .ranking-section {
    max-height: 300px;
  }
}

@media (max-width: 768px) {
  .role-square {
    padding: 10px;
  }

  .shared-notice-content {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .search-wrapper {
    flex-direction: column;
    gap: 12px;
  }

  .search-input,
  .search-button {
    width: 100%;
  }
}

/* 分享模式样式 */
.shared-mode-notice {
  margin: 20px auto;
  max-width: 600px;
}

.shared-notice-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
</style>